class Magnifier{
		constructor(smallBox,Mask,bigBox) {
		   this.oSmallBox = smallBox;
		   this.oMask = Mask;
		   this.oBigBox = bigBox;
		   this.eventBind();
		}
		//鼠标移入图片让放大镜和大图显示
		mouseover(){
			let that = this;
			this.oSmallBox.onmouseover = function(){
				that.oMask.style.display = "block";
				that.oBigBox.style.display = "block";
			}
		}
		//鼠标移出图片让放大镜和大图隐藏
		mouseout(){
			let that = this;
			this.oSmallBox.onmouseout = function(){
				that.oMask.style.display = "none";
				that.oBigBox.style.display = "none";
			}
		}
		
		//鼠标移动让放大镜跟随鼠标
		mousemove(){
			let that = this;
			// 鼠标在oSmallBox上移动时候执行以下函数
			this.oSmallBox.onmousemove = function(evt){
				let e = evt || event;
				//左边和上边的的距离
				let left = e.screenX - this.offsetLeft - that.oMask.offsetWidth/2 -that.oMask.offsetWidth;
				let top =  e.pageY  - this.offsetTop - that.oMask.offsetHeight - that.oMask.offsetHeight*2;
				
				//这是边框条件，控制放大镜的边界
				if(left < 0 ){
					left = 0;
				}
				
				let maxLeft = this.offsetWidth -that.oMask.offsetWidth;
				if(left>maxLeft){
					left = maxLeft;
				}
				//上下边框界限
				if(top < 0 ){
					top = 0;
				}
				let maxTop = this.offsetHeight - that.oMask.offsetHeight;
				if(top>maxTop){
					top = maxTop;
				}
				
				// 改变放大镜的位置让跟随鼠标移动;
				that.oMask.style.left = left + "px";
				that.oMask.style.top = top + "px";
				
				//设置放大镜移动的时候大图按照比例向相反方向移动背景图的位置
				let x = that.oBigBox.offsetWidth*left/that.oMask.offsetWidth;
				let y = that.oBigBox.offsetHeight*top/that.oMask.offsetHeight;
				
				that.oBigBox.style.backgroundPositionX = -x + "px";
				that.oBigBox.style.backgroundPositionY = -y + "px";
							
			}
		}
		
		eventBind(){
			this.mouseover();
			this.mouseout();
			this.mousemove();
		}
		
	}
	
	//获取绑定元素
	let oSmallBox = document.getElementById("small-box");
	let oMask = document.getElementById("mask");
	let oBigBox = document.getElementById("big-box");
	let d = new Magnifier(oSmallBox,oMask,oBigBox);
	
// 添加购物车
//点击+增加货物数量
$(".jia").click(function(){
	//获取当前数量
	 let amount = $(".goods-num").html();
	 // 数量加一，并赋给文本框
	  amount++;
	  $(".goods-num").html(amount);
	 
	 //获取单价内容
	 let price = $(".goods-price").html();
	 // 计算总价
	 let nums = amount*price;
	 //小计价格
	 $(".goods-single-price").html(nums)

})

//点击减号
$(".jian").click(function(){
	//获取当前数量
	 let amount = $(".goods-num").html();
	 //不能小于1
	 amount--;
	 if(amount<=1){
		 amount = 1;
	 }
	 // 数量加一，并赋给文本框
	 $(".goods-num").html(amount);
	//获取单价内容
	let price = $(".goods-price").html();
	// 计算总价
	let nums = amount*price;
	//小计价格
	$(".goods-single-price").html(nums)

})


/* 点击切换详情 */

$(function() {
		//获取点击时间的对象
		$("#FootNav ul li").click(function() {
			//获取想要显示或者隐藏的对象
			var divShow = $("#FootCenter").children(".nav1");
			//判断当前对象是否被选中，如果没选中的话进入if循环
			if(!$(this).hasClass('selected')){
				//获取当前对象的索引
				var index = $(this).index();
				//当前对象添加选中样式并且其同胞移除选中样式；
				$(this).addClass('selected').siblings('li').removeClass('selected');
				//索引对应的div块显示
				$(divShow[index]).show();
				//索引对应的div块的同胞隐藏
				$(divShow[index]).siblings('.nav1').hide();
			}
			
			$(this).css({
				fontWeight: "bold",
				color: "#222222",
				backgroundColor:"#DCDCDC"
			})
			$(this).siblings().css({
				fontWeight: "normal",
				color: "#9c9c9c",
				backgroundColor:"#FFFFFF"
			})
		})
	})